import Vue from 'vue'
/*
    1、全局自定义指令的语法
    Vue.directive('指令名称',{
        钩子函数
    })
    2、常见的钩子函数有
    bind
    inserted
    update
    componentUpdated
    unbind
    3、bind函数的参数
    参数1：表示的绑定自定义指令的所在DOM元素
    参数2：传递的参数对象
*/
Vue.directive('waterMarker',{
    bind:function(el,binding){
        console.log('参数1',el);
        console.log('参数2',binding);
        //动态创建画布
        let can=document.createElement('canvas')
        //设置画布的大小
        can.width=200
        can.height=150
        //将画布设置为div的子元素
        el.appendChild(can)
        //获取画笔的上下文对象
        let cxt=can.getContext('2d')
        //设置颜色
        cxt.fillStyle=binding.value.textColor||"rgba(180,180,180,.4)"
        //设置旋转
        cxt.rotate((-20*Math.PI)/180)
        //给画布上写文字
        cxt.fillText(binding.value.text,can.width/10,can.height/2)
        el.style.backgroundImage=`url(${can.toDataURL('image/png')})`
    }
})
